<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/record' }">补货记录</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/record_info' }">详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="info-content">
			<div class="info-head">
				<div class="head-left">
					<div class="left-text">
						设备信息
					</div>
				</div>
				<div class="head-right">
					<div class="head-btn">
						<el-button round size="small">修改补货员</el-button>
					</div>
					<div class="head-btn">
						<el-button round size="small" :icon="Refresh">刷新</el-button>
					</div>
				</div>
			</div>
			<el-table :data="deviceData" style="width: 100%">
				<el-table-column prop="date" label="补货日期" />
				<el-table-column prop="name" label="设备名称" />
				<el-table-column prop="imei" label="设备IMEI号" />
				<el-table-column prop="number" label="生产编号" />
				<el-table-column prop="site" label="场地" />
				<el-table-column prop="region" label="区域" />
				<el-table-column prop="district" label="商圈" />
				<el-table-column prop="scene" label="场景策略" />
				<el-table-column prop="person" label="补货员" />
			</el-table>
			<div class="title">
				补货信息
			</div>
			<el-table :data="infoData" style="width: 100%">
				<el-table-column prop="id" label="序号" />
				<el-table-column prop="goods_img" label="通电状态">
					<template #default="scope">
						<img class="goods_img" src="/src/assets/home/commodity2.png" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="goods_name" label="商品名称" />
				<el-table-column prop="code" label="商品编号" />
				<el-table-column prop="date" label="生产日期" />
				<el-table-column prop="warranty" label="保质天数" />
				<el-table-column prop="effective" label="有效日期" />
				<el-table-column prop="num" label="补货数量" />
			</el-table>
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
					:disabled="disabled" layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { ArrowLeft, Refresh } from '@element-plus/icons-vue'
	import { useRouter } from 'vue-router';
	import type { ComponentSize } from 'element-plus'
	const router = useRouter();
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)
	const goBack = () => {
		router.back();
	};
	const deviceData = [
		{
			date: '2016-05-03',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			number: 'LHY2542541',
			site: '场地1',
			region: '常熟市',
			district: '常熟市琴川街道琴湖广场',
			scene: '购物中心',
			person: '小郑',
		},
		{
			date: '2016-05-03',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			number: 'LHY2542541',
			site: '场地1',
			region: '常熟市',
			district: '常熟市琴川街道琴湖广场',
			scene: '购物中心',
			person: '小郑',
		}
	]
	const infoData = [
		{
			id: '1',
			goods_img: '',
			goods_name: '康师傅茉莉蜜茶',
			code: '89865674567',
			date: '2016-05-03',
			warranty: '360',
			effective: '2017-05-03',
			num: '6',
		},
		{
			id: '1',
			goods_img: '',
			goods_name: '康师傅茉莉蜜茶',
			code: '89865674567',
			date: '2016-05-03',
			warranty: '360',
			effective: '2017-05-03',
			num: '6',
		}
	]
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
</script>

<style lang="scss" scoped>
	.info-content {
		background-color: #fff;
		margin-top: 20px;
		padding: 0px 10px;

		.info-head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.head-left {
				display: flex;
				align-items: center;
				cursor: pointer;
				padding: 10px;

				.left-text {
					font-size: 14px;
				}
			}

			.head-right {
				display: flex;
				align-items: center;

				.head-btn {
					margin-left: 10px;
				}
			}
		}

		.title {
			padding: 10px;
			font-size: 14px;
		}

		.goods_img {
			width: 30px;
			height: 50px;
		}

		.page_number {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
		}
	}
</style>